<template>
    <div>
        <div>
            <video id='video' width='500px' height='500px' autoplay='autoplay' style='margin-top: 20px'
                   controls></video>
            <canvas id='canvas' width='500px' height='500px' style='display: none'></canvas>
        </div>
        <div>
            <el-button type="primary" @click="openCameras" v-if="toggle===false">打开摄像头</el-button>
            <el-button type="primary" @click="closeCameras" v-else>关闭摄像头</el-button>
            <el-button type="info" @click="newFS(0)" :disabled="fullscreenLoading">录入面容</el-button>
            <el-button type="warning" @click="newFS(1)" :disabled="fullscreenLoading">更新面容</el-button>
            <el-button type="success" @click="newFS(2)" :disabled="fullscreenLoading">打卡</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
          userFace:{
              name:'',
              groupId:'',
              faceId:''
          }
        },
        name: "facePage",
        data() {
            return {
                constraints: {
                    video: {width: 500, height: 500},
                    audio: false
                },
                track:'',
                toggle: false,
                fullscreenLoading:false,
                pressTime:''
            }
        },
        methods: {
            openCameras() {
                //获得video摄像头区域
                let video = document.getElementById("video");
                //这里介绍新的方法，返回一个 Promise对象
                // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
                // then()是Promise对象里的方法
                // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
                // 避免数据没有获取到
                let promise = navigator.mediaDevices.getUserMedia(this.constraints);
                promise.then((MediaStream) => {
                    this.track = MediaStream.getTracks()[0];
                    video.srcObject = MediaStream;
                    video.play();
                    this.toggle = true;
                });
            },
            closeCameras() {
                let video = document.getElementById("video");
                video.srcObject = null;
                this.track.stop();
                this.toggle = false;
            },
            faceSearch(way) {
                let video = document.getElementById("video");
                let canvas = document.getElementById("canvas");
                let ctx = canvas.getContext('2d');
                ctx.drawImage(video, 0, 0, 500, 500);
                var base64File = canvas.toDataURL();
                this.userFace.file = base64File
                this.userFace.userId = this.userFace.id
                // console.log(this.userFace)
                if(this.toggle){
                    if(way===2){
                        this.searchFace(this.userFace);
                    }else if(way===1){
                        this.updateFace(this.userFace)
                    }else{
                        this.faceAdd(this.userFace)
                    }
                }else{
                    this.$message.warning("请打开摄像头！")
                }
                this.$emit('update:list')
            },
            newFS(way){
                if(this.pressTime===''){
                    this.pressTime = new Date().getTime()
                    this.faceSearch(way)
                }else {
                    let cur = new Date().getTime()
                    if(cur - this.pressTime<6000){
                        this.$message.info("你手速太快啦")
                    }else {
                        this.pressTime = cur
                        this.faceSearch(way)
                    }
                }
            },
            searchFace(registerFace) {
                this.postRequest('/clock/in/face/faceCompare',registerFace)
            },
            faceAdd(registerFace){
                this.postRequest('/clock/in/face/faceAdd',registerFace)
            },
            updateFace(registerFace){
                console.log(registerFace)
                this.putRequest('/clock/in/face/faceUpdate',registerFace)
            }
        }
    }
</script>

<style scoped>

</style>